<template>
  <tbc-dialog ref="dialog" title="商品列表" basic width="900px">
    <tbc-pagination :total="total" :config="{page, size}" simple @change="loadDataList">
      <template v-slot:left>
        <el-input placeholder="商品名称" class="short" v-model="filter.keyword" clearable size="small"
                  style="margin-right:10px;width:200px;"></el-input>
        <el-button
            icon="el-icon-search" type="primary" size="small"
            @click="loadDataList(1)">查询
        </el-button>
        <el-button
            icon="el-icon-refresh" size="small"
            @click="initDataList()">重置
        </el-button>
        <el-button
            type="text"
            @click.stop="$refs.search.show(filter)">
          高级搜索
          <i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
      </template>
      <template v-slot:right>
        <el-button size="small" icon="el-icon-refresh" circle @click="loadDataList(page)"></el-button>
      </template>
    </tbc-pagination>
    <div class="data-container">
      <tbc-dynamic-table
          max-height="400px"
          v-loading="loading"
          :data="dataList"
          :cols="[
            {type: 'selection', width: 60},
      {label: '商品信息', prop: 'base', width: 400},
      {label: '销售价', prop: 'shop_price', type: '', align: 'center'},
      {label: '销售状态', prop: 'sale_status', type: '', align: 'center'},
      {label: '操作', width: 60, type: 'action', prop: 'action', click: choiceGoods,
        button: [
          {label: '选择', type: 'text'}
      ]}]">
        <template v-slot:base="scope">
          <div style="float:left;width:70px;height:70px;">
            <el-image :src="scope.row.goods_image"></el-image>
          </div>
          <div style="padding:0 50px 0 90px;">
            <p>{{ scope.row.goods_id }}</p>
            <p class="">
              <span class="">{{ scope.row.goods_name }}</span>
            </p>
          </div>
        </template>
        <template v-slot:sale_status="scope">

          <el-tag size="mini" effect="dark" type="success" v-if="scope.row.sale_status === 1">销售</el-tag>
          <el-tag size="mini" effect="dark" type="primary" v-if="scope.row.sale_status === 2">仓库</el-tag>
        </template>
      </tbc-dynamic-table>
    </div>
    <tbc-pagination :total="total" :config="{page, size}" @change="loadDataList"/>
  </tbc-dialog>
</template>
<script lang="ts">
import {defineComponent, toRefs, ref, Ref} from 'vue'
import useGoods from './api/goods'

export default defineComponent({

  name: 'goods-selector',

  props: {
    closeOnSelected: {
      type: Boolean,
      default: true
    }
  },

  setup(props, {emit}) {
    const goods = useGoods()
    const dialog: Ref = ref(null)

    const show = () => {
      dialog.value.show()
      if (!(goods.dataList as any).length) goods.loadDataList()
    }

    const choiceGoods = (data: Record<string, string>) => {
      if (props.closeOnSelected) dialog.value.close()
      emit('choice', data)
    }

    return {
      ...toRefs(goods),
      dialog, show, choiceGoods

    }
  }
})
</script>